import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';

@Component({
  selector: 'app-simple-form',
  /*template: `
    <p>
    simple-form Works
    </p>`,*/
  template: `
    <div> 
      {{message}}         
      <!--<input #myInput type="text" (keydown.enter)="onEnter($event, myInput.value)">-->
      <!--<input #myInput type="text" [(ngModel)]="message">-->
      <input #myInput type="text" [(ngModel)]="message" 
        [ngClass]="{mousedown:isMousedown}"
        (mousedown)="isMousedown = true" 
        (mouseup)="isMousedown = false" 
        (mouseleave)="isMousedown = false" >
      <button (click)="update.emit({text: message })">更新</button>
    </div>`,
  styles: [`
    :host { margin: 10px; }
    
    .mousedown { border: 2px solid green }
    
    input:focus { font-weight: bold; }
  `]
})
export class SimpleFormComponent implements OnInit {

  isMousedown: boolean;

  @Input() message: string;
  @Output() update = new EventEmitter<{text: string}>();

  onClick(event, value) {
    console.log(event);
    console.log(value);
  }
  onEnter(event, value) {
    console.log(event);
    console.log(value);
  }

  constructor() { }

  ngOnInit() {
  }

}
